<template>
    <div class="specifications">
        <!-- 添加规格 -->
        <div class="top-specif">
            <el-button type="danger" :icon="Plus" @click="heanlderAddSpecifications">添加规格
            </el-button>
            <div  class="hide" v-for="(item,index) in list" :key="index">
                <div style="margin-bottom: 10px;" class="displey">
                    <div>
                        <el-input v-model="item.title" style="width: 400px;" size="small"/>
                        <el-tag class="button-new-tag ml-1" size="small" @click="handleInputConfirm(index)" style="margin-left: 20px;">
                            添加规格值
                        </el-tag>
                    </div>
                    <div>
                        <span class="span-x" @click="handleClose(index)">X</span>
                    </div>
                </div>
                <div>
                    <template v-for="(tag,ind) in item.values" :key="tag">
                        <input v-model="list[index].values[ind]" style="margin-right: 20px;" />
                        <CircleCloseFilled @click="deletCircleCloseFilleds(index,ind)" style="width: 1em; height: 1em;cursor: pointer;position: relative;right: 28.1px;bottom: 7.9px;" />
                    </template>
                </div>
            </div>
        </div>
        <el-button type="danger" :icon="RefreshRight" style="margin-top: 20px" @click="handlerStata">刷新</el-button>
        <!-- 表格渲染 -->
        <div class="specif-table">
            <el-table :data="skuList" style="width: 100%">
                <el-table-column v-for="(item, index) in list" :prop="'id_' + item.title" :label="item.title" />
                <el-table-column prop="price" label="销售价"/>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ClassText } from "#/index";
import { reactive, nextTick, ref } from "vue";
import { Plus, RefreshRight } from '@element-plus/icons-vue'
import { ElInput, ElMessage } from 'element-plus'
// 表格数据
let tableData = reactive(new ClassText())
const skuList = reactive([])
let list = reactive([
    {
        title:'颜色',
        values:['红色','黑色']
    }
])

// 删除
let handleClose = (index: number) => {
    list.splice(index,1)
}

// 添加
const handleInputConfirm = (ind:number) => {
    if (list[ind].values.length != 3) {
        list[ind].values.push('')
    }else{
        ElMessage.warning('不能超过三个')
    }
}

// 点击添加规格
function heanlderAddSpecifications() {
    list.push({title:'',values:[]})
}

function handlerStata() {
    console.log(list);
    lang()
}
function deletCircleCloseFilleds(index:number,ind:number){
    list[index].values.splice(ind,1)
}

// 笛卡尔算法
function lang() {
    //过滤掉商品维度数据里面的children数组
    let valueList = list.filter((item) => item.values.length).map((item) => item.values);
    const typeSku = list.filter((item) => item.values.length).map(item => item.title)//获取到商品维度数组里面所有的title（维度名称）
    // 使用笛卡尔积算法将数据进行交叉处理
    // 数组[11,12][21,22]变成[11,21],[11,22],[12,21],[12,22]
    let arr = valueList.reduce(
        (total:string[][], current) => {
            let temp: string[][] = []
            total.forEach(item => {
                current.forEach(value => {//拿到skuTagsList数组里面的每个维度名称
                    temp.push(item.concat([value]))//将其链接
                })
            })
            return temp
        },
        [[]]
    )
    
    // 进行拼接数据
    let lists = arr.map(item => {
        let obj = {price:1}
        item.forEach((val, index: number) => {
            // 相当于是添加一个对象
            obj['id_' + typeSku[index]] = val
        })
        return obj
    })
    //生成的数组长度赋值给skuLength，即表格要生成的行数
    console.log(lists);
    skuList.length = 0
    skuList.push(...lists)
    console.log(skuList,123);
    
}
</script>



<style lang="less" scoped>
.specifications {
    padding: 20px;
    background-color: #F0F2F5;

    .top-specif {
        padding: 10px;
        background-color: #FAFAFA;
        .specif-table {
            background-color: #FAFAFA;
        }

        .hide {
            margin-top: 20px;
        }
    }
}

.displey {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.span-x {
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    background-color: #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
}
</style>